<template>
  <div class="body-container">
    <div class="head-container">
      <el-row style="padding: 10px">
        <el-col :span="18">
          <el-page-header @back="goBack" content="碳交易">
          </el-page-header>
        </el-col>

      </el-row>
      <el-row style="padding-top: 40px">
        <el-col :span="18">
          <h1><i class="el-icon-orange" style="color: burlywood"></i>{{ tokenInfoForm.name }}</h1>
        </el-col>

      </el-row>
    </div>
    <div class="swap-container">
      <token-swap v-bind:token-swap-date="dynamicSegment"/>
    </div>
    <div class="echarts-container">
      <token-echarts  v-bind:token-data="data" v-loading="TokenLoading"/>
    </div>
    <div class="transfer-container">
      <transfer-list  v-bind:transfer-list-date="dynamicSegment"/>
    </div>

  </div>

</template>
<script>
import TokenSwap from "@/views/Wallet/components/TokenSwap";
import TokenEcharts from "@/views/Wallet/components/TokenEcharts";
import TransferList from "@/views/TokenInfo/components/TransferList";
export default {
  components:{
    TokenSwap,
    TokenEcharts,
    TransferList
  },
  data () {
    return {
      dynamicSegment: '12',
      tokenInfoForm:{
        name:'Token'
      },
      data : [
        ["2000-07-16", 64],
        ["2000-07-17", 69],
        ["2000-07-18", 88],
        ["2000-07-19", 77],
        ["2000-07-20", 83],
        ["2000-07-22", 57],
      ],
      TokenLoading:false,
    }
  },
  mounted() {
    console.log(this.$route.params.id)
    this.dynamicSegment = this.$route.params.id
  },
  watch: {

  },
  methods:{
    goBack() {
      this.$router.back()
    }
  }

}
</script>
<style scoped lang="less">
.body-container {
  padding: 0 200px;
}

.swap-container {
  padding-top: 40px;
}

.echarts-container {
  background-color:white;
  border-radius: 20px;
  margin-top: 20px;
  box-shadow: 0 1px 5px rgb(195, 186, 186);
}

.transfer-container{
  background-color:white;
  border-radius: 20px;
  margin-top: 20px;
  box-shadow: 0 1px 5px rgb(195, 186, 186);
}
</style>
